<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>密度分析作业</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="model" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>正在创建密度分析作业...</p>
            </div>
        </div>
    </div>
</div>
<div id="map" style="width: 100%;height:100%;border: 1px solid #dddddd"></div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
<script type="text/javascript">
    var layer, processingJobsUrl = "http://113.209.64.227:8090/iserver/services/processing/rest/v1/jobs",
            token = 'GSHB7qlocJkqEH0Ld6VUSGQfekOdPd3e9UdJoHjiupfbkGDggXQLSPWd6VaKm8NH4gvXx6UQ0TCI5wpfr-4Tlw..',
            map = L.map('map', {
                crs: L.CRS.TianDiTu_WGS84,
                center: [40.75, -73.95],
                maxZoom: 18,
                zoom: 12
            }),
            info = L.control({position: 'topright'}),
            query = [];
    L.supermap.tiandituTileLayer("http://t{s}.tianditu.com/vec_c/wmts", {
        layer: "vec",
        tilematrixSet: "c"
    }).addTo(map);

    info.onAdd = function () {
        var popup = L.DomUtil.create('div');
        popup.style = 'width:20%';
        popup.innerHTML = "<div class='panel panel-default'>" +
                "<div class='panel-heading'>" +
                "<h3 class='panel-title'>密度分析作业</h3>" +
                "</div>" +
                "<div class='panel-body'>" +
                "<div class='input-group'>" +
                "<span class='input-group-addon'>输入数据　</span>" +
                "<input id='datasetName' type='text' class='form-control' placeholder='test_newyork_taxi_2013_01_14k'/>" +
                "</div><p>" +
                "<div class='input-group'>" +
                "<span class='input-group-addon'>分析方法　</span>" +
                "<div>" +
                "<select class='form-control' id='method' name='clientType'>" +
                "<option value='0' selected='selected'>简单点密度分析</option>" +
                "<option value='1'>核密度分析</option>" +
                "</select></div>" +
                "</div><p>" +
                "<div class='input-group'>" +
                "<span class='input-group-addon'>网格面类型</span>" +
                "<select class='form-control' id='meshType' name='clientType'>" +
                "<option value='0' selected='selected'>四边形网格</option>" +
                "<option value='1'>六边形网格</option>" +
                "</select>" +
                "</div><p>" +
                "<div class='input-group'>" +
                "<span class='input-group-addon'>权重值索引</span>" +
                "<input id='fields' type='text' class='form-control' placeholder='7,8'/>" +
                "</div><p>" +
                "<div class='input-group'>" +
                "<span class='input-group-addon'>分析范围　</span>" +
                "<input id='query' type='text' class='form-control' placeholder='-74.150, 40.550, -73.750, 40.950'/>" +
                "</div><p>" +
                "<div class='input-group'>" +
                "<span class='input-group-addon'>分辨率　　</span>" +
                "<input id='resolution' type='text' class='form-control' placeholder='0.001'/>" +
                "</div><p>" +
                "<div class='input-group'>" +
                "<span class='input-group-addon'>半径　　　</span>" +
                "<input id='radius' type='text' class='form-control' placeholder='0.01'/>" +
                "</div><p>" +
                "<div align='right'>" +
                "<input type='button' id='btn' class='btn btn-primary' value='创建'/>" +
                "</div></div></div>";
        return popup;
    };
    info.addTo(map);

    ($('#query').val() || $('#query').attr('placeholder')).split(',').map(function (el) {
        return query.push(parseFloat(el));
    });
    var kernelDensityJobParameter = new SuperMap.KernelDensityJobParameter({
                datasetName: $('#datasetName').val() || $('#datasetName').attr('placeholder'),
                resolution: $('#resolution').val() || $('#resolution').attr('placeholder'),
                method: $('#method option:selected').attr('value'),
                meshType: $('#meshType option:selected').attr('value'),
                fields: $('#fields').val() || $('#fields').attr('placeholder'),
                query: L.latLngBounds(L.latLng(query[1], query[0]), L.latLng(query[3], query[2])),
                radius: $('#radius').val() || $('#radius').attr('placeholder')
            }),
            processingJobsService = new L.supermap.processingJobsService(processingJobsUrl);

    SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(token, 'token');
    $('#btn').on('click', function () {
        $('#btn').prop('disabled', true);
        $("#model").modal({show: true, backdrop: 'static', keyboard: false});
        if (map && layer) {
            map.removeLayer(layer);
        }
        processingJobsService.addKernelDensityJob(kernelDensityJobParameter, function (serviceResult) {
            if (serviceResult.error) {
                $('#btn').prop('disabled', false);
                $("#model").modal('hide');
                alert('创建失败!');
                return;
            }
            serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
                if (info.serviceType === 'RESTMAP') {
                    SuperMap.Request.get(info.serviceAddress + '/maps').then(function (response) {
                        return response.json();
                    }).then(function (result) {
                        var mapUrl = result[0].path;
                        layer = L.supermap.tiledMapLayer(mapUrl, {noWrap: true, transparent: true});
                        layer.addTo(map);
                        $("#model").modal('hide');
                        $('#btn').prop('disabled', false);
                    });
                }
            });
        });
    });

</script>
</body>
</html>